<template>
	<view class="container">
		<u-swiper :list="list1" :height="450" :effect3d="true" @click="click"></u-swiper>
		<view class="">
			<view class="notice-wrapper">
				<u-notice-bar :text="text1" bgColor="#f0f9ff" color="#4a90e2" :fontSize="20"></u-notice-bar>
			</view>
		</view>
		<scroll-view class="content">
			<view class="voice-counseling-list">
				<view class="voice-item" v-for="(item, index) in voiceList" :key="item.id"
					@click="handleItemClick(item)">
					<view class="status-tag" :class="getStatusClass(item.onlineStatus)"></view>

					<u-avatar :src="item.headPicture" size="60" class="voice-avatar"></u-avatar>
					<view class="voice-info">
						<view class="info-top">
							<text class="voice-name">{{item.name}}</text>
							<!-- 修复评分显示 -->
							<u-rate :count="5" :value="parseRate(item.rate)" :size="12" readonly
								active-color="#ff9900"></u-rate>
							<text class="voice-rate">{{parseRate(item.rate).toFixed(1)}}分 ({{item.bookingNum}}预约)</text>
						</view>
						<text class="voice-title">{{item.typeName}}</text>
						<text class="voice-desc">{{item.talkYou}}</text>
						<view class="voice-tags">
							<u-tag v-for="(tag, tagIndex) in item.expertiseField" :key="tagIndex" :text="tag"
								type="info" size="mini" shape="circle"></u-tag>
						</view>
					</view>
					<view class="voice-action">
						<button @click.stop="handleCounselorAction(item)" class="action-btn"
							:class="getStatusClass(item.onlineStatus)">
							{{ getButtonText(item.onlineStatus) }}
						</button>
					</view>
				</view>
			</view>

			<u-loadmore :status="loadStatus" marginTop="20" marginBottom="20" :size="30" />
		</scroll-view>
	</view>
</template>

<script>
	import {
		voiceTalk
	} from '@/utils/getDate.js';
	export default {
		data() {
			return {
				selectedCounselor: 'all',
				voiceList: [], // 初始化为空数组
				list1: [
					"https://lesson.iapeap.com/2023/jsqs/jsqsIndex.jpg",
				],
				text1: '已有2568位用户完成倾诉，满意度98.7%，立即找到适合您的倾听者',
				loadStatus: 'loading' // 初始加载状态
			}
		},
		onLoad() {
			this.getvoiceTalk()
			if (!uni.getStorageSync("userid")) {
				uni.showToast({
					title: "请先登录",
					icon: 'error'
				})
				setTimeout(function() {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}, 2000);
			} else {
				this.getvoiceTalk()
			}
		},
		methods: {
			click() {
				uni.navigateTo({
					url: "/pages/index/indeximg"
				})
			},
			// 解析评分（将"100%"转换为5）
			parseRate(rateStr) {
				const num = parseFloat(rateStr);
				return isNaN(num) ? 5 : num / 20;
			},

			// 根据在线状态获取CSS类名
			getStatusClass(status) {
				switch (status) {
					case '1':
						return 'online';
					case '2':
						return 'busy';
					default:
						return 'offline'; // 0和3都视为离线
				}
			},

			// 根据在线状态获取按钮文本
			getButtonText(status) {
				switch (status) {
					case '1':
						return '立即倾诉';
					case '2':
						return '忙碌中';
					default:
						return '已离线';
				}
			},

			// 获取语音倾诉列表数据
			getvoiceTalk() {
				const data = {
					qingSu: "",
					zhuTi: "",
					pageNum: 1,
					pageSize: 10,
					token: "94e5567345a4421aaa676501269748a5"
				};

				voiceTalk(data).then(res => {
					console.log(res)
					if (res.data) {
						// 直接使用接口返回的列表数据
						this.voiceList = res.data.list || [];
						this.loadStatus = this.voiceList.length > 0 ? 'nomore' : 'empty';
					} else {
						uni.showToast({
							title: res.msg || '数据加载失败',
							icon: 'none'
						});
						this.loadStatus = 'error';
					}
				}).catch(err => {
					console.error('获取语音倾诉列表失败:', err);
					uni.showToast({
						title: '请求失败，请重试',
						icon: 'none'
					});
					this.loadStatus = 'error';
				});
			},

			// 处理咨询师点击事件
			handleCounselorAction(item) {
				if (item.onlineStatus === '1') {
					console.log("跳转到表单填写", item);
					// 实际跳转逻辑
					// uni.navigateTo({ url: '/pages/counseling/form' });
				} else {
					uni.showToast({
						title: `咨询师${this.getButtonText(item.onlineStatus)}`,
						icon: 'none'
					});
				}
			},

			handleItemClick(item) {
				console.log('查看详情', item);
				uni.navigateTo({
					url: `/pages/TcMessages/TcMessages?id=${item.id}`
				})
			}
		}
	}
</script>



<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		// height: 100vh;
		overflow: hidden;
		background-color: #fff;
		padding-bottom: 60px;
	}

	.content {
		flex: 1;
		// height: calc(100vh - 44px);
		padding: 10px 15px;
		box-sizing: border-box;
	}

	.notice-wrapper {
		margin: 15px 0;
		border-radius: 8px;
		overflow: hidden;
	}

	.voice-counseling-list {
		.voice-item {
			background-color: #fff;
			border-radius: 12px;
			padding: 15px;
			margin-bottom: 15px;
			display: flex;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
			position: relative;
			overflow: hidden;

			.status-tag {
				width: 10px;
				height: 10px;
				position: absolute;
				top: 10px;
				right: 10px;
				border-radius: 50px;
				font-size: 12px;
				color: white;
				z-index: 1;

				&.online {
					background-color: #72c361;
				}

				&.busy {
					background-color: #FAAEAE;
				}

				&.offline {
					background-color: #7B8C95;
				}
			}

			.voice-avatar {
				margin-right: 12px;
				flex-shrink: 0;
			}

			.voice-info {
				flex: 1;
				display: flex;
				flex-direction: column;

				.info-top {
					display: flex;
					align-items: center;
					margin-bottom: 5px;

					.voice-name {
						font-size: 16px;
						font-weight: bold;
						color: #333;
						margin-right: 8px;
					}

					.voice-rate {
						font-size: 12px;
						color: #999;
						margin-left: 5px;
					}
				}

				.voice-title {
					font-size: 12px;
					color: #4a90e2;
					margin-bottom: 5px;
				}

				.voice-desc {
					font-size: 13px;
					color: #666;
					margin-bottom: 8px;
					line-height: 1.5;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.voice-tags {
					display: flex;
					flex-wrap: wrap;

					.u-tag {
						margin-right: 6px;
						margin-bottom: 6px;
					}
				}
			}

			.voice-action {
				margin-left: 10px;
				display: flex;
				align-items: center;
				flex-shrink: 0;

				.action-btn {
					background-color: #4a90e2;
					color: #fff;
					padding: 8px 12px;
					border-radius: 16px;
					font-size: 13px;
					border: none;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					line-height: 1.2;
					width: 80px;

					&.online {
						background-color: #678FCDQQ;
					}

					&.busy {
						background-color: #FAAEAE;
					}

					&.offline {
						background-color: #7B8C95;
					}
				}
			}
		}
	}
</style>